<template>
  <Filed label="会诊编号" :value="info.serialNumber"/>
  <Filed label="会诊类型" :value="info.consultationTypeStr"/>
  <Filed label="会诊方式" :value="info.consultationWayStr"/>
  <Filed label="会议号" :value="info.roomId"/>
  <Filed
      label="急症状况"
      :value="info.emergency"
      class="bg-red text-white rounded-[4px] px-2"
  />

  <div class="horizontal-separation"/>

  <Filed
      label="期望会诊时间"
      :value="expectedConsultationTime"
      empty-value="未选择"
  />
  <Filed
      v-if="info.ensureAppointTime"
      label="系统分配的会诊时间"
      :value="info.ensureAppointTime"
  />
  <Filed v-if="info.consultationType == 'clinical'" label="会诊类型">
    <div class="flex gap-3 text-[#0c6]">
      <div class="flex gap-0.5 items-center">
        <span>预约专家</span>
        <van-icon name="checked"/>
      </div>

      <div class="flex gap-0.5 items-center">
        <span>交互式会诊</span>
        <van-icon name="checked"/>
      </div>
    </div>
  </Filed>
  <Filed label="期望服务方信息" v-if="userInfo.roleCode !== roleCodes.doctor">
    <div v-for="(item, index) in info.serverDepartments" :key="index">
      {{
        info.serverInstiuttionName
      }}<span v-if="item.serverDepartmentName">
        / {{ item.serverDepartmentName }}</span
    ><span v-if="item.serversubDepartmentName">
        / {{ item.serversubDepartmentName }}</span
    ><span v-if="item.serverUserName">
        / {{ item.serverUserName }}(医生)</span
    >
    </div>
  </Filed>
  <Filed label="分诊信息" v-else>
    <div v-for="(item, index) in info.serverDepartments" :key="index">
      {{
        info.serverInstiuttionName
      }}<span v-if="item.ensureServerDepartmentName">
        / {{ item.ensureServerDepartmentName }}</span
    ><span v-if="item.ensureServersubDepartmentName">
        / {{ item.ensureServersubDepartmentName }}</span
    ><span v-if="item.ensureServerUserName">
        / {{ item.ensureServerUserName }}(医生)</span
    >
    </div>
  </Filed>

  <div class="horizontal-separation"/>

  <Filed label="申请方信息" :value="applyInfo"/>
  <Filed label="申请时间" :value="info.applyDate"/>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import Filed from "./Filed.vue";

export default defineComponent({
  name: "ConsultationInfo",
  components: {Filed},
  props: {
    info: Object,
  },
  data() {
    return {
      userInfo: {
        "nickname": "贾芷莹",
        "phoneNumber": "13585847855",
        "roleCode": "hospital_manage",
        "roleName": "会诊中心管理员",
        "desensitizedPhoneNumber": "135****7855",
        "visitNumber": 0,
        "bookingNumber": 0
      },
      roleCodes: {
        doctor: "hospital_doctor",
      },
    };
  },
  computed: {
    expectedConsultationTime() {
      if (this.info.appointTime == null) {
        return undefined;
      }

      return `${this.info.appointTime} ${this.info.dayRangeTypeStr}`;
    },
    applyInfo() {
      const info = this.info;
      let res = "";
      if (info.cosultationSourceType === "third") {
        res = info.thirdHospitalName;
        if (info.thirdHospitalOrganizationName) {
          res += `/ ${info.thirdHospitalOrganizationName}`;
        }
        if (info.thirdHospitalSubOrganizationName) {
          res += `/ ${info.thirdHospitalSubOrganizationName}`;
        }
        return res;
      }

      res = info.applyHospitalName;
      if (info.applyDepartmentName) {
        res += `/ ${info.applyDepartmentName}`;
      }
      if (info.applyRoomName) {
        res += `/ ${info.applyRoomName}`;
      }
      res += `/ ${info.applyUserName2}`;
      return res;
    },
  },
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  methods: {},
  beforeUnmount() {
  },
  unmounted() {
  },
});
</script>

<style scoped lang="scss">
.horizontal-separation {
  width: 100%;
  height: 1px;
  background: #e5e5e5;
}
</style>
